<template>
	<div class='full-width archive-page'>
		<div class="item" v-for="(item, index) in sets" :key="index" @click="itemClick(item)">
			<i :class="item.icon"></i>{{item.name}}
		</div>
	</div>
</template>

<script>
export default {
	name: 'FunPage',
	components: {
	},
	data () {
		return {
			sets: [
				{
					id: 'theater',
					name: '豆瓣影院',
					url: '/theater',
					icon: 'icon-ios-film'
				}, {
					id: 'TS',
					name: '豆瓣图书',
					url: '/book',
					icon: 'icon-ios-journal'
				}, {
					id: 'TP',
					name: '壁纸天堂',
					url: '/photograph',
					icon: 'icon-ios-images'
				}, {
					id: 'TL',
					name: '时钟锁屏',
					url: '/time',
					icon: 'icon-ios-timer'
				}, {
					id: 'CSS',
					name: 'CSS布局',
					url: '/css-layout',
					icon: 'icon-ios-tablet-landscape'
				}, {
					id: '3D',
					name: '3D实验室',
					url: '/3D',
					icon: 'icon-ios-cube'
				}, {
					id: 'TEST',
					name: 'IDEA实验室',
					url: '/lab',
					icon: 'icon-ios-flask'
				}, {
					id: 'TYPING',
					name: '沉洋打字机',
					url: '/typing',
					icon: 'icon-ios-keypad'
				}, {
					id: 'TYPINGCH',
					name: '沉洋打字机（中文版）',
					url: '/typingChinese',
					icon: 'icon-ios-barcode'
				}, {
					id: 'FILESYSTEM',
					name: '云文件管理系统',
					url: '/fileSystem',
					icon: 'icon-ios-barcode'
				}
			]
		};
	},
	mounted () {
	},
	methods: {
		itemClick (item) {
			window.open('#' + item.url);
		}
	}
};
</script>

<style lang='scss' scoped>
.archive-page {
	width: 100%;
	max-width: 1080px;
	margin: 20px auto;
	padding: 20px;
	min-height: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;

	.item {
		width: 200px;
		height: 100px;
		margin: 10px;
		float: left;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28px;
		background: linear-gradient(145deg, #348a84, #04648c, #024b6a);
		border-radius: 20px;
		cursor: default;
		user-select: none;
		color: white;
		flex-grow: 1;
		transition: opacity .2s linear;

		i {
			font-size: 32px;
			padding-right: 10px;
		}

		&:hover {
			opacity: 0.8;
		}
	}
}
</style>
